<template>
  <div
    class="w100"
    :class="classList"
  >
    <span class="tip-icon-inner"></span>
    <el-select
      v-bind="{ ...item }"
      v-model="changeValue"
      popper-class="t-select-popper"
      filterable
      @change="handleChange"
    >
      <template
        v-for="option in getOptions()"
        :key="option.value"
      >
        <el-option
          v-if="!isHideQuota(option) && isShowOption(`${props.item?.vModel}_${option.value}`)"
          :value="option.value"
          :label="option.label"
        >
          <span v-if="getSurplusQuota(option) <= 0 && item?.config?.quotaBlankWarning">{{ item.config.quotaBlankWarning }}</span>
          <span
            v-else
            v-html="option.label"
          ></span>
          <span
            class="text-muted"
            v-if="showQuota(option)"
          >
            ({{ $t("formgen.radio.remaining") }}{{ getSurplusQuota(option) }})
          </span>
        </el-option>
      </template>
    </el-select>
  </div>
</template>

<script setup lang="ts" name="TMultipleSelect">
import { formItemProps } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { selectEmits, useSelect } from "./useSelect";
import { useOptionQuota } from "@/views/formgen/components/FormItem/hooks/useOptionQuotaHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(selectEmits);

const { changeValue, classList, handleChange, getOptions, isShowOption } = useSelect(props, emits);
const optionQuotaHook = useOptionQuota(props);

const { isHideQuota, getSurplusQuota, showQuota } = optionQuotaHook;
</script>

<style scoped lang="scss">
@use "../../../assets/styles/exam" as *;
</style>
